﻿PopupMarker.IS_BAIDU_MAP = typeof BMap !== 'undefined';
PopupMarker.YPOS = 0;
PopupMarker.LEFT_TOP_HEIGHT = 7;
PopupMarker.YPOS2 = PopupMarker.YPOS + PopupMarker.LEFT_TOP_HEIGHT;
PopupMarker.POPUP_TBL = {
    leftTop: { "left": 0, "top": PopupMarker.YPOS, "width": 19, "height": PopupMarker.LEFT_TOP_HEIGHT },
    leftTopFill: { "left": 16, "top": 3, "width": 4, "height": 4 },
    rightTop: { "left": 19, "top": PopupMarker.YPOS, "width": 10, "height": PopupMarker.LEFT_TOP_HEIGHT },
    rightTopImg: { "left": -125, "top": 0, "width": 10, "height": PopupMarker.LEFT_TOP_HEIGHT },
    centerTopFill: { "left": 19, "top": PopupMarker.YPOS, "width": 0, "height": PopupMarker.LEFT_TOP_HEIGHT },
    leftBody: { "left": 11, "top": PopupMarker.YPOS2, "width": 8, "height": 0 },
    centerBodyFill: { "left": 19, "top": PopupMarker.YPOS2, "width": 40, "height": 15 },
    rightBody: { "left": 19, "top": PopupMarker.YPOS2, "width": 9, "height": 0 },
    leftBottom: { "left": 0, "top": PopupMarker.YPOS2, "width": 20, "height": 21 },
    leftBottomImg: { "left": 0, "top": -13, "width": 20, "height": 21 },
    leftBottomFill: { "left": 16, "top": 0, "width": 4, "height": 6 },
    rightBottom: { "left": 19, "top": PopupMarker.YPOS2, "width": 10, "height": PopupMarker.LEFT_TOP_HEIGHT },
    rightBottomImg: { "left": -125, "top": -13, "width": 10, "height": PopupMarker.LEFT_TOP_HEIGHT },
    centerBottomFill: { "left": 19, "top": (PopupMarker.YPOS2 + (_.isIE ? -1 : 0)), "width": 0, "height": (6 + (_.isIE ? 1 : 0)) }
};
PopupMarker.prototype = PopupMarker.IS_BAIDU_MAP ? (new BMap.Overlay()) : (new google.maps.OverlayView());
/*
* @decription setMap填充覆盖物到地图放在最后一步，百度似乎有点问题
*/
function PopupMarker(opts) {
    this.ICON_WIDTH = opts.ICON_WIDTH || 12;
    this.ICON_HEIGHT = opts.ICON_HEIGHT || 20;
    this.map_ = opts.map;
    this.latlng_ = opts.position;
    this.icon_ = opts.icon;
    this.text_ = opts.text || "";
    this.showpop = opts.showpop || false;
    this.popupImgSrc_ = "images/1280.png";
    //是否已经执行过updatePopLayerText，在此函数结束时设置为true
    this.updatedPop = false;
    if (document.getElementById('dummyTextNode')) {
        this.dummyTextNode = document.getElementById('dummyTextNode');
    }
    else {
        var dummyTextNode = document.createElement("span");
        dummyTextNode.id = 'dummyTextNode';
        dummyTextNode.style.display = 'none';
        this.map_.getContainer().appendChild(dummyTextNode);
        this.dummyTextNode = dummyTextNode;
        dummyTextNode = null;
    }
    this.setMap(this.map_);
};
//百度需要额外推荐一些方法
if (PopupMarker.IS_BAIDU_MAP) {
    PopupMarker.prototype.initialize = function (map) {
        var spanContainer = document.createElement("span");
        this.container_ = document.createElement("div");
        this.iconContainer = document.createElement("div");

        var panes = this.map_.getPanes();
        panes.floatShadow.appendChild(spanContainer);
        spanContainer.appendChild(this.iconContainer);
        spanContainer.appendChild(this.container_);

        this.iconContainer.style.width = this.ICON_WIDTH + "px";
        this.iconContainer.style.height = this.ICON_HEIGHT + "px";
        this.iconContainer.innerHTML = "<img src='" + this.icon_ + "'>";
        this.iconContainer.style.position = "absolute";

        //panes.floatPane.appendChild(this.container_);
        this.container_.style.position = "absolute";
        if (!this.showpop) this.container_.style.visibility = "hidden";
        this.makeNormalPopup_();
        return spanContainer;
        //this.onAdd();
    };
    PopupMarker.prototype.setMap = function (obj) {
        if (obj == null)
            this.map_.removeOverlay(this);
        else {
            obj.addOverlay(this);
        }
    };
}
PopupMarker.prototype.onAdd = function () {
    this.container_ = document.createElement("div");
    this.iconContainer = document.createElement("div");
    var panes = this.getPanes ? this.getPanes() : this.map_.getPanes();
    panes.floatShadow.appendChild(this.iconContainer);
    panes.floatPane.appendChild(this.container_);

    this.iconContainer.style.width = this.ICON_WIDTH + "px";
    this.iconContainer.style.height = this.ICON_HEIGHT + "px";
    this.iconContainer.innerHTML = "<img src='" + this.icon_ + "'>";
    this.iconContainer.style.position = "absolute";

    this.container_.style.position = "absolute";
    if (!this.showpop) this.container_.style.visibility = "hidden";
    this.makeNormalPopup_();
};
PopupMarker.prototype.draw = function () {
    this.redrawNormalPopup_(this.text_);
};
PopupMarker.prototype.onRemove = function () {
    _.dom.remove(this.container_);
    _.dom.remove(this.iconContainer);
};

PopupMarker.prototype.makeNormalPopup_ = function () {
    var frag = document.createDocumentFragment();
    //0
    var leftTop_ = this.makeImgDiv_(this.popupImgSrc_, PopupMarker.POPUP_TBL.leftTop);
    leftTop_.appendChild(this.fillDiv_(PopupMarker.POPUP_TBL.leftTopFill));
    frag.appendChild(leftTop_);
    //1
    var leftBody_ = this.fillDiv_(PopupMarker.POPUP_TBL.leftBody);
    _.css(leftBody_, 'border-width:0 0 0 1px;border-style:none none none solid;border-color:#000');
    frag.appendChild(leftBody_);
    //2
    var leftBottom_ = this.makeImgDiv_(this.popupImgSrc_, PopupMarker.POPUP_TBL.leftBottomImg);
    leftBottom_.appendChild(this.fillDiv_(PopupMarker.POPUP_TBL.leftBottomFill));
    _.css(leftBottom_, 'left:' + PopupMarker.POPUP_TBL.leftBottom.left + 'px;top:' + PopupMarker.POPUP_TBL.leftBottom.top + 'px;width:' + PopupMarker.POPUP_TBL.leftBottom.width + 'px;height:' + PopupMarker.POPUP_TBL.leftBottom.height + 'px;');
    frag.appendChild(leftBottom_);
    //3
    var bodyContainer_ = document.createElement("div");
    _.css(bodyContainer_, 'position:absolute;background-color:#fff;overflow:hidden;left:' + PopupMarker.POPUP_TBL.centerBodyFill.left + 'px;top:' + PopupMarker.POPUP_TBL.centerBodyFill.top + 'px;width:' + PopupMarker.POPUP_TBL.centerBodyFill.width + 'px;height:' + PopupMarker.POPUP_TBL.centerBodyFill.height + 'px;');
    frag.appendChild(bodyContainer_);
    //4
    var rightTop_ = this.makeImgDiv_(this.popupImgSrc_, PopupMarker.POPUP_TBL.rightTopImg);
    _.css(rightTop_, 'left:' + PopupMarker.POPUP_TBL.rightTop.left + 'px;top:' + PopupMarker.POPUP_TBL.rightTop.top + 'px;width:' + PopupMarker.POPUP_TBL.rightTop.width + 'px;height:' + PopupMarker.POPUP_TBL.rightTop.height + 'px;');
    frag.appendChild(rightTop_);
    //5
    var rightBottom_ = this.makeImgDiv_(this.popupImgSrc_, PopupMarker.POPUP_TBL.rightBottomImg);
    _.css(rightBottom_, 'left:' + PopupMarker.POPUP_TBL.rightBottom.left + 'px;top:' + PopupMarker.POPUP_TBL.rightBottom.top + 'px;width:' + PopupMarker.POPUP_TBL.rightBottom.width + 'px;height:' + PopupMarker.POPUP_TBL.rightBottom.height + 'px;');
    frag.appendChild(rightBottom_);
    //6
    var rightBody_ = this.fillDiv_(PopupMarker.POPUP_TBL.rightBody);
    _.css(rightBody_, 'border-width:0 1px 0 0;border-style:none solid none none;border-color:#000');
    frag.appendChild(rightBody_);
    //7
    var centerBottom_ = this.fillDiv_(PopupMarker.POPUP_TBL.centerBottomFill);
    _.css(centerBottom_, 'border-width:0 0 1px 0;border-style:none none solid none;border-color:#000');
    frag.appendChild(centerBottom_);
    //8
    var centerTop_ = this.fillDiv_(PopupMarker.POPUP_TBL.centerTopFill);
    _.css(centerTop_, 'border-width:1px 0 0 0;border-style:solid none none none;border-color:#000');
    frag.appendChild(centerTop_);

    this.container_.appendChild(frag);
};
PopupMarker.prototype.redrawNormalPopup_ = function (text) {
    if (this.beforeNormalPopupText_ !== text) {
        var bodyContainer_ = this.container_.children[3],
			leftBottom_ = this.container_.children[2],
			leftBody_ = this.container_.children[1],
			rightTop_ = this.container_.children[4],
			rightBottom_ = this.container_.children[5],
			rightBody_ = this.container_.children[6],
			centerBottom_ = this.container_.children[7],
			centerTop_ = this.container_.children[8];
        bodyContainer_.innerHTML = text;
        if (!_.isIE && text) {
            if (bodyContainer_.firstChild.nodeType === 1) {
                bodyContainer_.firstChild.style.margin = 0;
            }
        }
        var offsetBorder = _.isIE ? 2 : 0;
        var cSize = this.getHtmlSize_(text);
        var rightX = PopupMarker.POPUP_TBL.leftTop.width + cSize.width;
        leftBottom_.style.top = (cSize.height + PopupMarker.POPUP_TBL.leftBody.top) + "px";
        leftBody_.style.height = cSize.height + "px";
        bodyContainer_.style.width = cSize.width + "px";
        bodyContainer_.style.height = cSize.height + "px";
        bodyContainer_.style.top = PopupMarker.POPUP_TBL.leftBody.top;
        rightTop_.style.left = rightX + "px";
        rightBottom_.style.left = rightTop_.style.left;
        rightBottom_.style.top = leftBottom_.style.top;
        rightBody_.style.left = rightX + "px";
        rightBody_.style.height = leftBody_.style.height;
        centerBottom_.style.top = leftBottom_.style.top;
        centerBottom_.style.width = cSize.width + "px";
        centerTop_.style.width = cSize.width + "px";
        this.size_ = {
            "width": (rightX + PopupMarker.POPUP_TBL.rightTop.width),
            "height": (cSize.height + PopupMarker.POPUP_TBL.leftTop.height + PopupMarker.POPUP_TBL.leftBottom.height)
        };
        this.container_.style.width = this.size_.width + "px";
        this.container_.style.height = this.size_.height + "px";
    }
    bodyContainer_ = leftBottom_ = leftBody_ = rightTop_ = rightBottom_ = rightBody_ = centerBottom_ = centerTop_ = null;
    this.setPosition(this.latlng_);
    this.beforeNormalPopupText_ = text;
};

/*
* @description 获得文字内容的基本宽度和高度，如果遇见marker没有正确的显示出来，很有可能是这里出问题了
* @return goome.maps.Size
*/
PopupMarker.prototype.getHtmlSize_ = function (html) {
    var size = {};
    this.dummyTextNode.innerHTML = html;
    this.dummyTextNode.style.display = '';
    size.width = this.dummyTextNode.offsetWidth;
    size.height = this.dummyTextNode.offsetHeight;
    this.dummyTextNode.style.display = 'none';
    var ret, lines = html.split(/\n/i), totalSize = eval("(" + "{width:1,height: 1}" + ")");
    for (var i = 0; i < lines.length; i++) {
        totalSize.width += size.width;
        totalSize.height += size.height;
    }
    return totalSize;
};

PopupMarker.prototype.makeImgDiv_ = function (imgSrc, params) {
    var imgDiv = document.createElement("div");
    imgDiv.style.position = "absolute";
    imgDiv.style.overflow = "hidden";
    if (params.width) {
        imgDiv.style.width = params.width + "px";
    }
    if (params.height) {
        imgDiv.style.height = params.height + "px";
    }
    var img = null;
    if (!_.isIE) {
        img = new Image();
        img.src = imgSrc;

    } else {
        img = document.createElement("div");
        if (params.width) {
            img.style.width = params.width + "px";

        }
        if (params.height) {
            img.style.height = params.height + "px";
        }
    }
    img.style.position = "relative";
    img.style.left = params.left + "px";
    img.style.top = params.top + "px";
    img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgSrc + "')";
    imgDiv.appendChild(img);
    img = null;
    return imgDiv;
};
PopupMarker.prototype.fillDiv_ = function (params) {
    var bgDiv = document.createElement("div");
    bgDiv.style.position = "absolute";
    bgDiv.style.backgroundColor = "#FFF";
    bgDiv.style.fontSize = "1px";
    bgDiv.style.lineHeight = "1px";
    bgDiv.style.overflow = "hidden";
    bgDiv.style.left = params.left + "px";
    bgDiv.style.top = params.top + "px";
    bgDiv.style.width = params.width + "px";
    bgDiv.style.height = params.height + "px";
    return bgDiv;
};
PopupMarker.prototype.hide = function () {
    if (this.container_) {
        this.container_.style.visibility = "hidden";
    }
};
PopupMarker.prototype.show = function () {
    if (this.container_) {
        this.container_.style.visibility = "visible";
    }
};
PopupMarker.prototype.toggle = function () {
    if (this.container_) {
        if (this.container_.style.visibility == "hidden") {
            this.show();
        } else {
            this.hide();
        }
    }
};
PopupMarker.prototype.setPosition = function (latlng) {
    if (!latlng) {
        throw Error('PopupMarker:use wrapped LatLng');
    }
    var pxPos = this.map_.pointToOverlayPixel(latlng);
    this.container_.style.left = pxPos.x + "px";
    this.container_.style.top = (pxPos.y - this.size_.height) + "px";
    var icon = this.icon_;
    if (icon.indexOf('east') > -1) {
        this.iconContainer.style.left = (pxPos.x - this.ICON_WIDTH * 0.75) + "px";
    } else {
        this.iconContainer.style.left = (pxPos.x - this.ICON_WIDTH / 2) + "px";
    }
    this.iconContainer.style.top = (pxPos.y - this.ICON_HEIGHT) + "px";
    this.latlng_ = latlng;
};
PopupMarker.prototype.update = function (obj) {
    if ((typeof obj.icon) != "undefined") {
        if (this.icon_ != obj.icon) {
            this.iconContainer.innerHTML = "<img src='" + obj.icon + "'>";
            this.icon_ = obj.icon;
        }
    }
    if ((typeof obj.position) != "undefined") {
        this.latlng_ = obj.position;
        this.setPosition(this.latlng_);
    }
    if ((typeof obj.text) != "undefined") {
        this.text_ = obj.text;
        this.redrawNormalPopup_(obj.text);

    }
};
PopupMarker.prototype.setZIndex = function (index) {
    this.container_.style.zIndex = index;
    this.iconContainer.style.zIndex = index;
};
PopupMarker.prototype.latlng = function () {
    return this.latlng_;
};
PopupMarker.prototype.hideMarker = function () {
    this.container_.style.visibility = "hidden";
    this.iconContainer.style.visibility = "hidden";
};
PopupMarker.prototype.showMarker = function () {
    this.container_.style.visibility = "visible";
    this.iconContainer.style.visibility = "visible";
};